<template>
  <view>
    <view class="content">
       
        <view class="flower-title">{{content[0]}}</view>
        <view class="flower-info">{{content[1]}}</view>
        <scroll-view scroll-y class="flower-body">{{content[2]}}{{content[3]}}</scroll-view>

    </view>

    <view class="age" @click="reCommit"></view>

    <image
        class="tip"
        src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20240207/32d033831817facdf2bd1affb85934f0.png"
        mode="widthFix"
      ></image>

  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

</script>

<style lang="scss" scoped>

   .age{
        position: absolute;
        z-index: 99;
        top: 89%;
        height: 100rpx;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width: 40%;
        left: 30%;
        background-image: url('http://img-pushpic.doutuimao.net/mini/commonupload/20230517/3b40f6bccbfcb6dd33ee3b1096411c1c.png');
        background-size: 100% 100%;
    }
    .tip{
        z-index: 102;
        position: absolute;
        top: 81%;
        right: 15%;
        width: 60%;
    }
    .content{
        position: absolute;
        z-index: 99;
        top: 28%;
        height: 49%;
        width: 84%;
        left: 8%;
        color: rgb(203,114,0);
        border-top: none;
        background-image: url("https://img-pushpic.doutuimao.net/mini/commonupload/20230517/00fc982126d75b435c95d88eb5800a84.png");
        background-size: 100% 100%;
        .flower-info{
            color: white;
            font-weight: bolder;
            font-size: 50rpx;
            margin-top: 18%;
            text-align: center;
        }
        .flower-title{
            color: rgb(254,114,138);
            text-align: center;
            margin: 0 10% ;
            margin-top: 20%;
            width: 80%;
            font-weight: bolder;
            font-size: 50rpx;
            background-color: white;
            border-radius: 20rpx;
            padding: 20rpx 0;
        }
        .flower-body{
            color: rgb(254,114,138);
            font-size: 25rpx;
            background: white;
            width: 80%;
            margin: auto;
            border-radius: 20rpx;
            padding: 20rpx;
            margin-top: 13%;
        }
    }
</style>
